<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-row  type="flex" style=" height: 100%;" justify="center" align="middle">
                <el-col :span="6">
                    <div class="log_container grid-content bg-purple">
                        <a href="#" @click.prevent="jump_userHome()">
                            <img style="width: 80%; margin-left: 50px;" src="../assets/logo.png"/>
                        </a>
                    </div>
                </el-col>
                <el-col :span="13">
                    <el-row :gutter="18">
                        <div class="jump_container">
                            <el-col :span="6"><div class="grid-content bg-purple"><el-menu-item @click="jump">中草药识别</el-menu-item></div></el-col>
                            <el-col :span="6" v-if="showManagementSystem"><div class="grid-content bg-purple"><el-menu-item @click="jump_ManagementSystem">管理系统</el-menu-item></div></el-col>
                        </div>
                    </el-row>
                </el-col>
                <el-col :span="4">
                    <div class="handel_container grid-content bg-purple">
                        <div class="button_container">
                            <el-button  @click="jump_login">登录\注册</el-button>
                        </div>
                    </div>
                </el-col>
                <el-col :span="1">
                    <div class="r-content">
                        <el-dropdown @command="handleClick">
                            <span class="el-dropdown-link">
                                <img class="user" ref="user" v-if="showImg()" :src="showImg()" onerror="this.src='user.jpg';this.onerror=null"/>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
                                <el-dropdown-item command="cancel">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-menu>
    </div>
</template>
<script>
import Cookie from 'js-cookie'
export default {
    data(){
        return {
            img:null,
            drawer:true
        }
    },
    methods:{
        convertToImage(binaryString) {
          const byteCharacters = atob(binaryString); // 将base64编码的二进制字符串解码为原始字节流
          const byteArrays = [];
            for (let offset = 0; offset < byteCharacters.length; offset += 512) {
                const slice = byteCharacters.slice(offset, offset + 512);
                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                  }
              const byteArray = new Uint8Array(byteNumbers);
              byteArrays.push(byteArray);
            }
          const blob = new Blob(byteArrays, { type: 'image/jpeg' }); // 根据实际情况设置MIME类型
          return URL.createObjectURL(blob); // 生成URL
        },
        showImg(){
          return this.convertToImage(this.img)
        },
        getUserInfo(){
          this.$axios.get('/getUserInfo').then(({data}) => {// 请求成功，返回
                if(data.code===200){
                    this.img=data.data.user.img
                }else{
                    this.$message({
                        type: 'error',
                        message: data.data.message
                    });
                }
            })
            .catch((err) => {// 请求失败
                console.log(err);
            });
        },
        jump_ManagementSystem() {
            this.$router.push("/empty")
            if (location.href.indexOf("#reloaded") == -1) {
                location.href = location.href + "#reloaded";
                location.reload();
            }
        },
        jump_login(){
            if(this.$route.path !== "/login" ) {
                this.$router.push("/login")
            }
        },
        jump_userHome(){
            if(this.$route.path !== "/userHome" ) {
                this.$router.push("/userHome")
            }
        },
        jump(){
            if(this.$route.path !== "/imageIdentification" ) {
                this.$router.push("/imageIdentification")
            }
        },
        handleClick(command){
            if(command==='cancel'){
                Cookie.remove('token')
                Cookie.remove('menu')
                Cookie.remove('permission')
                this.$store.commit('managementSystem',""); 
                if(this.$route.path !== "/login") {
                    this.$router.push("/login")
                }
                if (location.href.indexOf("#reloaded") == -1) {
                    location.href = location.href + "#reloaded";
                    location.reload();
                }
            }else if(command==="personalCenter"){
                if(this.$route.path !== "/userPersonalCenter") {
                    this.$router.push("/userPersonalCenter")
                }
            }
        }
    },
    computed: {
        showManagementSystem() {
            let permission=Cookie.get('permission')
            if(this.$store.state.tab.showManagementSystem){
                return true
            }
            if("管理员"===permission||"超级管理员"===permission){
                return true
            }else{
                return false
            }
        },
    },
    mounted(){
        this.getUserInfo()
    }
}
</script>
<style lang="less" scoped>
.jump_container{
    margin-left: 170px;
}
.r-content{
    .user{
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
}
.log_container{
    display: flex;
    justify-content: center;/*垂直居中*/
    align-items: center;/*水平居中*/
}
.handel_container{
    display: flex;
    justify-content: center;/*垂直居中*/
    align-items: center;/*水平居中*/
    .button_container{
        margin-left: 40%;
        margin-right: 0px;
    }
}
.el-menu-item{
    text-align: center;
    font-size: 16px;
    text-color:#6c727f
}
.handel_container{
    .el-button{
        background-color: "#F8FAFC";
        font-weight:bold;
    }
}
</style>